/*
  * @Author: wzh 
  * @Date: 2021-07-08 19:06:06
  * @Last Modified by: 1521620993@qq.com
  * @Last Modified time: 2021-07-08 19:06:06
  */
:root {
  /* 背景色起始颜色 */
  --startColor: #e96f1eb9;
  /* 背景色结束颜色 */
  --endColor: #9b59b699;
  /* 步骤小卡片元素阴影颜色 */
  --stepShadow: #00000066;
  /* 输入框边框颜色 */
  --inputBdColor: #ccc;
  /* 主色调 */
  --mainColor: #277cae;
  /* h2颜色 */
  --h2Color: #2C3E50;
  /* h3颜色 */
  --h3Color: #666;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  // outline: 1px dashed purple;
}
body {
  background: linear-gradient(var(--startColor), var(--endColor)) no-repeat;
  height: 100vh;
  // overflow: hidden;

  /* 主区域开始 */
  .main {
    width: 400px;
    margin: 50px auto;
    text-align: center;
    display: none;

    /* 步骤进度条开始 */
    ul.bar {
      /* 将ul设置为BFC容器 */
      overflow: hidden;
      // background: purple;

      /* 步骤分区开始 */
      li {
        float: left;
        width: 33.33%;
        position: relative;

        /* 步骤之间长条开始 */
        &::after {
          content: '';
          width: 100%;
          height: 2px;
          background: #fff;
          position: absolute;
          left: -50%;
          top: 9px;
          z-index: -1;
        }
        &.active::after {
          background: var(--mainColor);
        }
        /* 第一个长条需要隐藏 */
        &:nth-child(1)::after {
          display: none;
        }
        /* 步骤之间长条结束 */

        span {
          font-size: 12px;
        }

        /* 步骤数字开始 */
        span.num {
          display: block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          background: #fff;
          margin: 0 auto 5px;
          border-radius: 3px;
          color: var(--mainColor);
        }
        &.active span.num {
          background: var(--mainColor);
          color: #fff;
        }
        /* 步骤数字结束 */

        /* 步骤名称开始 */
        span.txt {
          color: #fff;
        }
        /* 步骤名称结束 */

      }
      /* 步骤分区结束 */

    }
    /* 步骤进度条结束 */

    /* 小卡片表单开始 */
    .steps {
      width: 320px;
      margin: 30px auto;
      position: relative;

      /* 步骤小卡片开始 */
      .step {
        background-color: #fff;
        margin-bottom: 50px;
        box-shadow: 1px 1px 15px 1px var(--stepShadow);
        padding: 20px 30px;
        position: absolute;
        width: 100%;
        transition: 0.5s;

        h2.title {
          font-size: 15px;
          color: var(--h2Color);
          margin-bottom: 10px;
        }
        h3.subtitle {
          font-size: 13px;
          color: var(--h3Color);
          margin-bottom: 20px;
          font-weight: normal;
        }
        input,
        textarea {
          width: 100%;
          padding: 15px;
          margin-bottom: 10px;
          border-radius: 3px;
          border: 1px solid var(--inputBdColor);
        }
        input.btn {
          width: 100px;
          background-color: var(--mainColor);
          color: #fff;
          border: none;
          cursor: pointer;
        }
      }
      /* 步骤小卡片结束 */
    }
    /* 小卡片表单结束 */
  }
  /* 主区域结束 */

}
